<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>HTML / CSS Crash Course</title>
<!-- metadata -->
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="presdate" content="20050728" />
<meta name="author" content="Eric A. Meyer" />
<meta name="company" content="Complex Spiral Consulting" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- S5 JS -->
<script src="ui/default/slides.js" type="text/javascript"></script>
</head>
<body>

<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>Tri-C Web 2 Fall 2008</h1>
<h2>HTML / CSS Crash Course</h2>
</div>

</div>

<div class="presentation">

<div class="slide">
<h1>Valid HTML</h1>
<ul>
<li>Language can be ambiguous.
<blockquote><p>I'm eating a banana and chicken sandwich</p></blockquote>
</li>
<li>Web browsers face similar problems.</li>

<li>Valid HTML means the browser doesn't have to guess <em>as
much</em>.</li>

<li>many, many tools exist to help with this.</li>

</ul>
</div>

<div class="slide">
<h1>Semantic HTML</h1>
<ul>
<li>Use tags to describe the meaning of the document</li>
<li>Use CSS and javascript to describe the presentation</li>
<li>bold vs strong, italic vs emphasis</li>
<li>Stuff that happens in a sequence should use an ordered list.</li>
<li>On your forms, use label tags to describe the input fields.</li>
<li>Cluster related elements somehow.</li>
</ul>
</div>

<div class="slide">
<h1>How to mark up this recipe for chocolate milk?</h1>

<pre>
Ingredients:

1 cup of milk
1 bottle of hershey's syrup

Instructions:

1. Pour the milk into a glass.
2. Squeeze the hershey's syrup bottle into the milk.
3.Use a spoon to stir the milk until it changes color.
</pre>

</div>

<div class="slide">
<h1>One possible approach</h1>
<pre>
&lt;div class="ingredients"&gt;
&lt;h2&gt;Ingredients:&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;1 cup of milk&lt;/li&gt;
&lt;li&gt;1 bottle of hershey's syrup&lt;/li&gt;
&lt;/div&gt;&lt;!-- closes ingredients div --&gt;

&lt;div class="instructions"&gt;
&lt;h2&gt;Instructions:&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;1. Pour the milk into a glass.&lt;/li&gt;
&lt;li&gt;2. Squeeze the hershey's syrup bottle into the milk.&lt;/li&gt;
&lt;li&gt;3.Use a spoon to stir the milk until it changes color.&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;&lt;!-- closes instructions div --&gt;
</pre>
</div>

<div class="slide">
<h1>examples</h1>
<ul>
    <li><a href="../recipe1.html">No styling</a></li>
    <li><a href="../recipe2.html">Different styling</a></li>
    <li><a href="../recipe3.html">Also different styling</a></li>
</ul>

<div class="slide">
<h1>recipe 2</h2>
<ul>
<li>Boring, except for the :hover rule</li>
<li>font-variant also sorta neat</li>
</ul>

<div class="slide">
<h1>recipe 3</h1>
<ul>
<li>The two divs are set to float left and right respectively.</li>
<li>The ingredients list is set to display inline</li>
<li>I'm using a :after rule to add a comma after each list element.</li>
</ul>

<div class="slide">
<h1>CSS</h1>
<pre>
body
{
    font-family:sans;
    background-color:#d2c8ff;
}
h1
{
    font-family:serif;
    font-variant:small-caps;
    background:url("chocolate-milk.jpg") no-repeat top right;
    height:50px;
    margin-left:-2000px;
}
</pre>

<p>C stands for "CASCADING".</p>

</div>

<div class="slide">
<h1>CSS selectors</h1>
<ul>
<li>Can apply styles by tag name</li>
<li>By ID and class</li>
<li>Multiple selectors can be used with a comma.</li>
<li>Parents, children, and ancestors</li>
<li>attributes</li>
</ul>
</div>

<div class="slide">
<h1>CSS selector examples</h1>
<ul>
<li>input [type='submit']</li>
<li>div.ingredients li</li>
<li>div.instructions &gt; ul &gt; li</li>
<li>h1, h2, h3, h4</li>
</ul>
</div>

</div>

</div>

</body>
</html>
